<template>
  <div class="wrapper">
    <div v-for="(item,index) in dealSuggestText" :key="index">
      {{item.normal}}<span class="high-linght">{{item.light}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HighLight',
  props: {
    // 搜索建议
    suggestText: {
      type: String,
      default: ''
    },
    // 关键词
    keyWord: {
      type: String,
      default: ''
    }
  },
  methods: {

  },
  computed: {
    dealSuggestText () {
      // 中转数组
      const temp = this.suggestText.split(this.keyWord)
      const len = temp.length
      const res = []
      for (let i = 0; i < len - 1; i++) {
        res.push({ normal: temp[i], light: this.keyWord })
      }
      // 最后一项去除关键字
      res.push({ normal: temp[len - 1], light: '' })

      return res
    }
  }
}
</script>

<style lang='less' scoped>
.high-linght {
  color: red;
}

.wrapper{
  display: flex;
}
</style>
